:root {
  --menu-bg-color: var(--menu-background-color, var(--el-bg-color));
  --menu-text-color: var(--el-text-color-primary);
  --menu-text-active-color: var(--el-color-primary);
  --menu-bg-sub-color: var(--el-bg-color);
  --menu-bg-active-color: var(--el-bg-color);
  --collapse-bottom-background-color: rgb(var(--background-color-invert) / 10%);
}

html:not(.dark) {
  --menu-bg-color: var(--menu-background-color, #001529);
  --menu-text-color: rgb(255 255 255 / 70%);
  --menu-text-active-color: white;
  // --menu-bg-sub-color: #0c2135;
  --menu-bg-sub-color: rgb(var(--background-color-secondary) / 10%);
  --menu-bg-collaspe-color: rgb(var(--background-color-invert) / 50%);
  --menu-bg-active-color: var(--el-color-primary);
  // --collapse-bottom-background-color: #1a2d3f;
  --collapse-bottom-background-color: rgb(var(--background-color-secondary) / 10%);
}

.menu-nav-item {
  display: flex;
  align-items: center;
  height: 50px;
  overflow: hidden;
  color: var(--menu-text-color);
  background: var(--menu-bg-color);

  .icon {
    font-size: 16px;
    flex: none;
  }

  .text {
    margin-left: 6px;
  }

  .arrow {
    margin-left: auto;
    width: 14px;
  }

  &:hover {
    color: var(--menu-text-active-color);
    cursor: pointer;
  }

  &.sub {
    background-color: var(--menu-bg-sub-color);
  }

  &:not(.title).active {
    color: var(--menu-text-active-color);
    background: var(--menu-bg-active-color, var(--el-color-primary));
  }

  &.title.active {
    color: var(--menu-text-active-color);
  }
}

.vpopup-popuper.nav-popup,
.vpopup-popuper.nav-popup-list {
  box-shadow: var(--el-box-shadow);
}

.left .vpopup-popuper.nav-popup,
.left-mix .vpopup-popuper.nav-popup-list {
  background-color: var(--menu-bg-color);
}

.top .vpopup-popuper.nav-popup,
.top-mix .vpopup-popuper.nav-popup {
  background-color: var(--el-bg-color);
}
